<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wanho{
            border: 1px solid green;
        }
        .hello{
            color: blue;
            font-size: 40px;
            background: pink;
            text-decoration: underline;
        }
    </style>
    <script>
        function operate(){
            /**
             * 访问内容
             */ 
            var mydiv = document.getElementById('mydiv')
            // console.log(mydiv.innerHTML)
            // console.log(mydiv.innerText)
            // mydiv.innerText = '好好学习，天天向上'

            /**
             * 访问CSS
             */ 
            // mydiv.style.color = 'red'
            // mydiv.style.fontSize = '50px'

            // mydiv.classList.add('hello')
            // mydiv.classList.remove('wanho')


            /**
             * 添加节点
             */ 
            // <li id="hello" onclick="">lucy</li>
            var li = document.createElement('li')
            li.innerText = 'lucy'
            li.id = 'hello'
            li.onclick = function(){
                console.log(123)
            }

            // var myul = document.getElementById('myul')
            // myul.appendChild(li)
            // myul.insertBefore(li, document.getElementById('jack'))

            /**
             * 删除节点
             */ 
            document.getElementById('jack').remove()
        }
    </script>
</head>
<body>
    <button onclick="operate()">操作页面中的元素</button>
    <hr>

    <div id="mydiv" class="wanho">
        <h2>嘿嘿</h2>
    </div>
    <hr>    

    <ul id="myul">
        <li>tom</li>
        <li id="jack">jack</li>
        <li>alice</li>
    </ul>

</body>
</html>